<template>
  <div style="width: 100%">
    <el-row :gutter="0">
     <el-col :span="4">
       <div>
         <el-row class="tac">
           <el-col :span="24">
             <el-menu
                 router
                 :default-openeds="['1', '2']"
             >
               <el-sub-menu index="1">
                 <template #title>
                   <span>我的创建</span>
                 </template>
                 <el-menu-item-group>
                   <el-menu-item @click="open"><el-icon><CirclePlus /></el-icon>新建收藏夹</el-menu-item>
                   <el-menu-item index="/collect/favlist"><el-icon><FolderOpened /></el-icon>默认收藏夹{{videoArr.length}}</el-menu-item>
                 </el-menu-item-group>
               </el-sub-menu>
               <hr>
               <el-sub-menu index="2">
                 <template #title>
                   <span>我的订阅和收藏</span>
                 </template>
                 <el-menu-item-group>
                   <el-menu-item index="list3">1</el-menu-item>
                   <el-menu-item index="list4">2</el-menu-item>
                 </el-menu-item-group>
               </el-sub-menu>
               <hr>
               <el-menu-item index="list4"><el-icon><FolderOpened /></el-icon>话题收藏夹</el-menu-item>
               <el-menu-item index="list5"><el-icon><FolderOpened /></el-icon>专题收藏夹</el-menu-item>
               <el-menu-item index="list6"><el-icon><FolderOpened /></el-icon>图文收藏夹</el-menu-item>
               <el-menu-item index="list7"><el-icon><FolderOpened /></el-icon>课程收藏夹</el-menu-item>
               <el-menu-item index="list8"><el-icon><FolderOpened /></el-icon>我的笔记本</el-menu-item>
             </el-menu>
           </el-col>
         </el-row>
       </div>
     </el-col>

     <el-col :span="20">
       <div style="margin: 0 auto">
         <!--  视频相关开始  -->
<!--         <el-row style="background-color: white;border: 1px solid white;height: 150px">-->
<!--           <el-col :span="5" style="margin-left: 10px">-->
<!--               <router-link to="'/detail?id='+c.id">-->
<!--                 <img src="/imgs/test.jpg" style="width: 100%;height: 100%">-->
<!--               </router-link>-->
<!--           </el-col>-->
<!--           <el-col :span="18">-->
<!--             <p style="font-size: 10px;margin: 10px">默认收藏夹</p>-->
<!--           </el-col>-->
<!--         </el-row>-->
<!--         <hr>-->
         <!--  内容列表开始  -->
         <el-row :gutter="20">
           <el-col :span="6" v-for="c in videoArr" style="margin: 5px 0" >
             <el-card>
               <router-link :to="'/detail?id='+c.id">
                 <img :src="c.coverUrl" style="width: 100%;height: 145px">
                 <p class="title_p">{{ c.title }}</p>
               </router-link>
             </el-card>
           </el-col>
         </el-row>
         <el-pagination background layout="prev,pager,next"
                        :total="total"
                        :page-size="limit"
                        :current-page="currentPage"
                        @current-change=""/>
       </div>
     </el-col>
    </el-row>


  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import router from "@/router";
import {ElMessage, ElMessageBox} from "element-plus";
import tokenAxios from "@/http/request/TokenAxios";

const user = ref(getUser());
const videoArr = ref([]);

onMounted(()=>{
  if (user==null){
    alert("请先登录!");
    router.push('/login');
  }
  console.log(user.value)
  tokenAxios.get('http://124.71.182.39:26000/LikeCollect/getVideoCollection/'+user.value.id)
      .then((response)=>{
        console.log(response);
        if (response.data.state=20000){
          // if (response.data.data.length === 0) {
          //   // 数据库中没有更多数据了，停止发送请求
          //   return;
          // }
          // videoArr.value += response.data.data;
          videoArr.value = videoArr.value.concat(response.data);
        }else {
          ElMessage.error(response.data.message)
        }

      })
})



const currentPage = ref(1) //当前的页码
const total = ref(videoArr.value.length)  //总数据
const limit = ref(16) //每页多少条

const open = () => {
  ElMessageBox.prompt('收藏夹名称', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    inputPattern:
        /^[\u4e00-\u9fa5\w$]+$/,
    inputErrorMessage: '收藏夹名称不允许包含特殊字母',
  })
      .then(({ value }) => {
        ElMessage({
          type: 'success',
          message: `${value}创建成功`,
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '提交失败',
        })
      })
}

// const videoArr = ref([{
//   "id": 27,
//   "title": "家常面包",
//   "imgUrl": "/imgs/test.jpg",
//   "categoryName": "面包",
//   "nickName": "汤姆",
//   "userImgUrl": "/imgs/head.jpg"
// },
//   {
//     "id": 18,
//     "title": "爆浆抹茶甜甜圈面包，自带幸福感的小甜甜",
//     "imgUrl": "/imgs/test.jpg",
//     "categoryName": "家常菜",
//     "nickName": "汤姆",
//     "userImgUrl": "/imgs/head.jpg"
//   },
//   {
//     "id": 17,
//     "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
//     "imgUrl": "/imgs/test.jpg",
//     "categoryName": "小食",
//     "nickName": "汤姆",
//     "userImgUrl": "/imgs/head.jpg"
//   },
//   {
//     "id": 16,
//     "title": "蔓越莓绿豆糕，味道还不错值得一试!",
//     "imgUrl": "/imgs/test.jpg",
//     "categoryName": "面包",
//     "nickName": "汤姆",
//     "userImgUrl": "/imgs/head.jpg"
//   },
//   {
//     "id": 16,
//     "title": "蔓越莓绿豆糕，味道还不错值得一试!",
//     "imgUrl": "/imgs/test.jpg",
//     "categoryName": "面包",
//     "nickName": "汤姆",
//     "userImgUrl": "/imgs/head.jpg"
//   },
//   {
//     "id": 16,
//     "title": "蔓越莓绿豆糕，味道还不错值得一试!",
//     "imgUrl": "/imgs/test.jpg",
//     "categoryName": "面包",
//     "nickName": "汤姆",
//     "userImgUrl": "/imgs/head.jpg"
//   },
//   {
//     "id": 16,
//     "title": "蔓越莓绿豆糕，味道还不错值得一试!",
//     "imgUrl": "/imgs/test.jpg",
//     "categoryName": "面包",
//     "nickName": "汤姆",
//     "userImgUrl": "/imgs/head.jpg"
//   },
//   {
//     "id": 16,
//     "title": "蔓越莓绿豆糕，味道还不错值得一试!",
//     "imgUrl": "/imgs/test.jpg",
//     "categoryName": "面包",
//     "nickName": "汤姆",
//     "userImgUrl": "/imgs/head.jpg"
//   },
//   {
//     "id": 16,
//     "title": "蔓越莓绿豆糕，味道还不错值得一试!",
//     "imgUrl": "/imgs/test.jpg",
//     "categoryName": "面包",
//     "nickName": "汤姆",
//     "userImgUrl": "/imgs/head.jpg"
//   },
//   {
//     "id": 16,
//     "title": "蔓越莓绿豆糕，味道还不错值得一试!",
//     "imgUrl": "/imgs/test.jpg",
//     "categoryName": "面包",
//     "nickName": "汤姆",
//     "userImgUrl": "/imgs/head.jpg"
//   },
//   {
//     "id": 16,
//     "title": "蔓越莓绿豆糕，味道还不错值得一试!",
//     "imgUrl": "/imgs/test.jpg",
//     "categoryName": "面包",
//     "nickName": "汤姆",
//     "userImgUrl": "/imgs/head.jpg"
//   },
//   {
//     "id": 16,
//     "title": "蔓越莓绿豆糕，味道还不错值得一试!",
//     "imgUrl": "/imgs/test.jpg",
//     "categoryName": "面包",
//     "nickName": "汤姆",
//     "userImgUrl": "/imgs/head.jpg"
//   }]);


</script>

<style scoped>
.title_p {
  height: 40px;
  overflow: hidden; /*超出不显示*/
  /*设置省略号相关样式*/
  display: -webkit-box;
  -webkit-line-clamp: 2; /*设置行数*/
  -webkit-box-orient: vertical; /*纵向*/
}
a{
  color: #333;
  text-decoration: none;
}
a:hover{
  color: orange;
}

</style>